<template>
	<u-popup :show="visible" mode="center" round="16rpx" :safeAreaInsetBottom="false" @close="hide">
		<view class="com-chat-decrypt">
			<view class="com-chat-decrypt__title">{{title}}</view>
			<view class="com-chat-decrypt__content">
				<rich-text :nodes="content"></rich-text>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		data() {
			return {
				visible: false,
				title: '',
				content: '',
			}
		},
		methods: {
			show(data) {
				this.visible = !this.visible
				this.title = data.title
				this.content = data.content
			},
			hide() {
				this.visible = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.com-chat-decrypt {
		width: 540rpx;
		padding: 40rpx 32rpx;

		.com-chat-decrypt__title {
			font-size: 24rpx;
			color: #86909C;
			line-height: 34rpx;
			text-align: center;
		}

		.com-chat-decrypt__content {
			margin-top: 8rpx;
			font-size: 30rpx;
			color: #4E5969;
			line-height: 42rpx;
			text-align: center;
		}
	}
</style>